<script lang="ts" setup>
import { SmileOutlined } from '@ant-design/icons-vue';
import { usePlantStore } from "../store/PlantData";

// Pinia Store
const plantStore = usePlantStore();

const columns = [
  {
    title: '标题',
    dataIndex: 'name',
    key: 'name',
    width: '60%',
  },
  {
    title: '类别',
    dataIndex: 'type',
    key: 'type',
    width: '20%',
  },
  {
    title: '日期',
    dataIndex: 'date',
    key: 'date',
    width: '20%',
  },
];

const updatePlantSets = () => {
  plantStore.updatePlantSets();
};
updatePlantSets();
</script>

<template>
  <a-table
    class="w-full plant-table"
    :columns="columns"
    :data-source="plantStore.getPlantSets"
    :loading="plantStore.getPlantLoading"
    :pagination="plantStore.pagination"
  >
    <template #headerCell="{ column }">
      <template v-if="column.key === 'name'">
        <span class="flex items-center">
          <smile-outlined class="mr-2" />
          标题
        </span>
      </template>
    </template>

    <template #bodyCell="{ column, record }">
      <template v-if="column.key === 'name'">
        <router-link
          :to="{ name: 'PlantPage', params: { id: record.id } }"
          class="text-sky-400 hover:underline"
        >
          {{ record.name }}
        </router-link>
      </template>
    </template>
  </a-table>
</template>

<style scoped>
</style>
